import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import RoleCard from '@/components/RoleCard';
import { roles } from '@/mocks/roles';

interface RoleListProps {
  setSelectedRole: (role: any) => void;
}

export default function RoleList({ setSelectedRole }: RoleListProps) {
  const navigate = useNavigate();
  const [searchQuery, setSearchQuery] = useState('');
  
  const filteredRoles = roles.filter(role => 
    role.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    role.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
    role.personality.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <div className="space-y-8">
      <div className="text-center">
        <h1 className="text-[clamp(1.8rem,4vw,3rem)] font-bold text-blue-700 mb-4">角色列表</h1>
        <p className="text-gray-600 max-w-2xl mx-auto">选择一个角色开始对话，或使用下方搜索框查找特定角色</p>
      </div>
      
      <div className="max-w-2xl mx-auto">
        <div className="relative">
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="搜索角色..."
            className="w-full py-4 px-5 pr-12 rounded-2xl border border-gray-200 shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
          />
          <button className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-blue-600 transition-colors">
            <i className="fa-solid fa-search text-xl"></i>
          </button>
        </div>
      </div>
      
      <div className="flex justify-end mb-6">
        <button 
          className="px-4 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors flex items-center gap-2"
          onClick={() => navigate('/roles/new')}
        >
          <i className="fa-solid fa-plus"></i>
          新增角色
        </button>
      </div>
      
      {filteredRoles.length === 0 ? (
        <div className="text-center py-16 bg-white rounded-2xl shadow-sm">
          <i className="fa-solid fa-search text-4xl text-gray-300 mb-4"></i>
          <h3 className="text-xl font-medium text-gray-700 mb-2">未找到角色</h3>
          <p className="text-gray-500">尝试使用不同的搜索词或浏览所有角色</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
          {filteredRoles.map(role => (
            <RoleCard 
              key={role.id} 
              role={role} 
              onClick={() => setSelectedRole(role)} 
            />
          ))}
        </div>
      )}
    </div>
  );
}